<script setup lang="ts">
import { RouterLink, useRoute } from 'vue-router'
import { Calendar, Home,  Search, Bookmark, Earth } from "lucide-vue-next"
import ThemeToggle from '@/components/ThemeToggle.vue'

import { computed } from 'vue'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"


// Menu items.
const route = useRoute()

const items = [
  {
    title: "首页",
    url: "/",
    icon: Home,
  },
  {
    title: "帖子",
    url: "/posts",
    icon: Bookmark,
  },
  {
    title: "聊天室",
    url: "/chat",
    icon: Calendar,
  },
  {
    title: "用户",
    url: "/user",
    icon: Search,
  },
];

// 检查当前路由是否匹配菜单项
const isActive = (url: string) => {
  if (url === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(url)
}

// 返回世界按钮点击处理函数
const handleReturnToWorld = () => {
  window.location.href = 'http://localhost:5173/map/worldmap'
}
</script>

<template>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <div class="sidebar-header">
          <SidebarGroupLabel>侧边导航栏</SidebarGroupLabel>
          <ThemeToggle />
        </div>
        <SidebarGroupContent>
          <SidebarMenu>
              <SidebarMenuItem v-for="item in items" :key="item.title">
                <SidebarMenuButton asChild :isActive="isActive(item.url)">
                    <RouterLink :to="item.url">
                      <component :is="item.icon" />
                      <span>{{item.title}}</span>
                    </RouterLink>
                </SidebarMenuButton>
              </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenuButton @click="handleReturnToWorld">
        <Earth />
        <span>返回世界</span>
      </SidebarMenuButton>
    </SidebarFooter>
  </Sidebar>
</template>

<style scoped>
/* 侧边栏头部容器 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  margin-bottom: 8px;
}

/* 暗黑模式切换按钮样式调整 */
.sidebar-header :deep(.dropdown-menu-trigger) {
  height: 32px;
  width: 32px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  border: 1px solid hsl(var(--sidebar-border));
  color: hsl(var(--sidebar-foreground));
  transition: all 0.2s ease;
}

.sidebar-header :deep(.dropdown-menu-trigger:hover) {
  background: hsl(var(--sidebar-accent));
  border-color: hsl(var(--sidebar-accent-foreground));
}

/* 侧边栏标题样式优化 */
:deep([data-sidebar="group-label"]) {
  font-size: 1rem;
  font-weight: bold;
  color: hsl(var(--sidebar-foreground));
  padding: 12px 0;
  margin-bottom: 0;
  letter-spacing: 0.025em;
  flex: 1;
}

/* 菜单项样式优化 */
:deep([data-sidebar="menu-button"]) {
  height: 44px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 12px;
  transition: all 0.3s ease-out;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  color: hsl(var(--sidebar-foreground));
}

:deep([data-sidebar="menu-button"]:hover) {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
  border-color: hsl(var(--sidebar-border) / 0.5);
}

:deep([data-sidebar="menu-button"]:focus-visible) {
  outline: 2px solid hsl(var(--sidebar-ring));
  outline-offset: 2px;
}

/* 菜单项激活状态 */
:deep([data-sidebar="menu-button"][data-active="true"]) {
  background-color: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: hsl(var(--sidebar-primary) / 0.2);
}

/* 图标样式优化 */
:deep([data-sidebar="menu-button"] svg) {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  transition: all 0.3s;
}

/* 激活状态图标 */
:deep([data-sidebar="menu-button"][data-active="true"] svg) {
  color: hsl(var(--sidebar-primary-foreground));
}

/* 文字样式优化 */
:deep([data-sidebar="menu-button"] span) {
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s;
}

/* 菜单项悬停效果增强 */
:deep([data-sidebar="menu-button"]:hover:not([data-active="true"])) {
  transform: translateX(4px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 菜单项点击效果 */
:deep([data-sidebar="menu-button"]:active) {
  transform: scale(0.98);
}

/* 侧边栏整体背景优化 */
:deep([data-sidebar="sidebar"]) {
  background-color: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
}

/* 侧边栏内容区域间距优化 */
:deep([data-sidebar="group-content"]) {
  padding: 0 4px;
}

:deep([data-sidebar="group-content"] > *:not(:last-child)) {
  margin-bottom: 4px;
}

/* 侧边栏组间距优化 */
:deep([data-sidebar="group"]) {
  padding: 16px 12px;
}

/* 侧边栏内容整体 */
:deep([data-sidebar="content"]) {
  padding: 8px 0;
}

/* RouterLink 样式重置 */
:deep([data-sidebar="menu-button"] a) {
  display: flex;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
  padding: 0;
}

:deep([data-sidebar="menu-button"] a:hover) {
  background-color: transparent;
}

/* 菜单列表样式 */
:deep([data-sidebar="menu"]) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style>